<template>
  <div>
    <el-dialog v-model="showDialog" :title="title" width="50%" center>
      <el-form :model="authDTO" ref="authDTORef" :label-width="100" label-position="left">
        <div class="flex-container">
          <el-form-item class="flex-1" label="父级权限" prop="parentId" :rules="required">
            <el-select v-model="authDTO.parentId" placeholder="父级权限">
              <el-option label="无" :value="'0'" />
              <el-option v-for="item in menuAuthList" :label="item.authName" :value="item.id" :key="item.id" />
            </el-select>
          </el-form-item>
          <el-form-item
            class="flex-1 ml-1em"
            label="权重排序"
            prop="weight"
            :rules="[required, { max: 30000, min: 1, message: '只能输入 1-30000', validator: limitMaxMin }]">
            <el-input type="number" :step="1" v-model="authDTO.weight" placeholder="权重排序,值越小越靠前"></el-input>
          </el-form-item>
        </div>
        <div class="flex-container">
          <el-form-item class="flex-1" prop="authCode" :rules="required">
            <template #label>
              <div class="flex-container">
                <span>权限编码</span>
                <el-tooltip class="box-item" effect="dark" placement="top">
                  <template #content> 编码规则， 模块:实体:权限类型:操作<br />例如 sys:authority:api:update或者sys:authority:menu </template>
                  <el-icon class="ml-0_1em txt-gray-90 mouse-help">
                    <QuestionFilled />
                  </el-icon>
                </el-tooltip>
              </div>
            </template>
            <el-input :disabled="isEdit" v-model.trim="authDTO.authCode" placeholder="只允许输入小写英文字母 a-z 和英文冒号 :"></el-input>
          </el-form-item>
          <el-form-item class="flex-1 ml-1em" label="权限名称" prop="authName" :rules="required">
            <el-input v-model="authDTO.authName" placeholder="权限名称" />
          </el-form-item>
        </div>
        <el-form-item label="权限描述" prop="authDesc" :rules="required">
          <el-input type="textarea" v-model="authDTO.authDesc" placeholder="权限描述" />
        </el-form-item>
        <el-form-item label="权限类型" prop="authType" :rules="required">
          <Dictionary mode="radio" dict-code="AuthType" v-model:item-value="authDTO.authType"></Dictionary>
        </el-form-item>
        <div v-if="authDTO.authType == 0">
          <div class="flex-container">
            <el-form-item class="flex-1" prop="menu.menuName" :rules="[required, letter]">
              <template #label>
                <div class="flex-container">
                  <span>菜单名</span>
                  <el-tooltip class="box-item" effect="dark" placement="top">
                    <template #content> 菜单的唯一名称，只允许输入英文字母 A-Za-z</template>
                    <el-icon class="ml-0_1em txt-gray-90 mouse-help">
                      <QuestionFilled />
                    </el-icon>
                  </el-tooltip>
                </div>
              </template>
              <el-input v-model="authDTO.menu.menuName" placeholder="菜单的唯一名称"></el-input>
            </el-form-item>
            <el-form-item class="flex-1 ml-1em" label="菜单标题" prop="menu.menuTitle" :rules="required">
              <template #label>
                <div class="flex-container">
                  <span>菜单标题</span>
                  <el-tooltip class="box-item" effect="dark" placement="top">
                    <template #content>菜单栏，标签栏，面包屑的标题</template>
                    <el-icon class="ml-0_1em txt-gray-90 mouse-help">
                      <QuestionFilled />
                    </el-icon>
                  </el-tooltip>
                </div>
              </template>
              <el-input v-model="authDTO.menu.menuTitle" placeholder="菜单标题" />
            </el-form-item>
          </div>
          <div class="flex-container">
            <el-form-item class="flex-1" label="路由地址" prop="menu.menuPath" :rules="required">
              <template #label>
                <div class="flex-container">
                  <span>路由地址</span>
                  <el-tooltip class="box-item" effect="dark" placement="top">
                    <template #content>路由地址，/ 开头。例如：/sys/user 建议写全路径</template>
                    <el-icon class="ml-0_1em txt-gray-90 mouse-help">
                      <QuestionFilled />
                    </el-icon>
                  </el-tooltip>
                </div>
              </template>
              <el-input v-model="authDTO.menu.menuPath" placeholder="路由地址，地址栏中 # 后面部分" />
            </el-form-item>
            <el-form-item class="flex-1 ml-1em" label="组件地址" prop="menu.component" :rules="required">
              <template #label>
                <div class="flex-container">
                  <span>组件地址</span>
                  <el-tooltip class="box-item" effect="dark" placement="top">
                    <template #content>
                      组件地址，/ 开头<br />
                      例如：/sys/user/index 表示 @/views/sys/user/index.vue <br />
                      如果是后台目录，则固定写 admin
                    </template>
                    <el-icon class="ml-0_1em txt-gray-90 mouse-help">
                      <QuestionFilled />
                    </el-icon>
                  </el-tooltip>
                </div>
              </template>
              <el-input v-model="authDTO.menu.component" placeholder="组件地址，@/views 后面部分" />
            </el-form-item>
          </div>
          <el-form-item label="菜单图标" prop="menu.menuIcon" :rules="required">
            <icon-select v-model="authDTO.menu.menuIcon" placeholder="图标"></icon-select>
          </el-form-item>
        </div>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="switchDialog()"> 取 消 </el-button>
          <el-button type="primary" @click="submitForm">提 交</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, onMounted, computed } from 'vue'
import { QuestionFilled } from '@element-plus/icons-vue'
import Auth from '@/api/sys/auth'
import { required, limitMaxMin, letter } from '@/utils/FormRule'
import AuthTypeEnum from '@/enums/AuthTypeEnum'
import { deepClone } from '@/utils'
import IconSelect from '@/components/IconSelect/index.vue'
import Dictionary from '@/components/Dictionary/index.vue'

onMounted(() => {})

defineProps({
  /**
   * 所有的菜单权限
   */
  menuAuthList: {
    type: Array,
    default: [],
  },
})

// 弹框开关
const showDialog = ref(false)

// 是否更新，false为新增弹框，true为修改弹框
const isEdit = ref(false)

// 弹框标题
const title = computed(() => (isEdit.value ? '修改权限' : '新增权限'))

// 权限参数
const authDTO = ref({})

// 权限表单ref
const authDTORef = ref()

const emits = defineEmits(['success'])

// 提交表单之前先验证
function submitForm() {
  // 表单验证, 如果是菜单，则需要验证权限和菜单两个表单
  authDTORef.value.validate((valid) => {
    if (valid) {
      if (isEdit.value) {
        update()
      } else {
        add()
      }
    }
  })
}

// 新增一个权限
function add() {
  Auth.create(authDTO.value).then(() => {
    emits('success')
    switchDialog()
  })
}

// 更新权限信息
function update() {
  Auth.update(authDTO.value).then(() => {
    emits('success')
    switchDialog()
  })
}

/**
 * 弹框的打开与关闭
 * @param edit true编辑, false新增
 * @param auth 需要编辑的权限信息
 */
function switchDialog(edit, auth) {
  // 先判断是新增还是修改
  isEdit.value = edit
  if (auth) {
    authDTO.value = deepClone(auth)
  } else {
    // 弹框关闭清空数据
    if (authDTORef.value !== undefined) {
      authDTORef.value.resetFields()
    }
    isEdit.value = false
  }
  showDialog.value = !showDialog.value
}

defineExpose({ switchDialog })
</script>

<style lang="scss" scoped>
label {
  font-weight: normal;
}
</style>
